<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>v-show原理解析</title>
  </head>
  <body>
    <button onclick="model.isShow = true">显示</button>
    <button onclick="model.isShow = false">隐藏</button>
    <div v-show="isShow">Hello World</div>
    <script>
      var model = {
        isShow: false,
      }
      // 拿到要操作的元素----定义数据和视图
      var view = document.querySelector('div')
      // 定义一个方法，通过给元素增加display:none来控制他的显示与隐藏-----定义视图刷新方法
      var updateView = function(value){
        view.style.display = value? '': 'none'
      }
      // 获取到元素的属性----设置视图初始化
      var directiveKey = view.getAttribute('v-show')
      // 改变选中view的显示与隐藏
      updateView(model[directiveKey])

      // 监听数据变化，然后刷新视图，达到数据驱动的目的
      Object.defineProperty(model, 'isShow', {
        set: function(val){
          updateView(val)
        }
      })
    </script>
  </body>
</html>